<div class="visit-record page-content ">
	<form nz-form [formGroup]="validateForm" class="page-header">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="visitTitle">网格员类型</nz-form-label>
					<nz-form-control>
						<nz-select formControlName="griderType" nzPlaceHolder="请选择" nzAllowClear>
							<!-- <nz-option [nzLabel]="'专职网格长'" nzValue="1"></nz-option>
							<nz-option [nzLabel]="'网格员'" nzValue="2"></nz-option>
							<nz-option [nzLabel]="'微网格长'" nzValue="3"></nz-option> -->
							<nz-option [nzLabel]="grider" [nzValue]="i + 1" *ngFor="let grider of griderList; let i = index"></nz-option>

						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="name">姓名</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="name" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" >
				<nz-form-item>
					<nz-form-label nzFor="beginDate">开始日期</nz-form-label>
					<nz-form-control>
						<nz-date-picker style="width: 100%;" formControlName="beginDate"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" >
				<nz-form-item style="float: right;">
					<button *ngIf="authList.includes(authEnum.VISIT_RECORD_VIEW)" nz-button  style="margin-right: 10px;" (click)="onSearch(true)">
						<i nz-icon nzType="search"></i>
						搜索
					</button>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="endDate">结束日期</nz-form-label>
					<nz-form-control>
						<nz-date-picker style="width: 100%;" formControlName="endDate"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>

	</form>


	<nz-table #basicTable [nzData]="data" [nzBordered]="true" [nzShowPagination]="false" nzSize="middle"
		[nzScroll]="{y:  'calc(100vh - 190px - 41px)'}" [nzLoading]="nzLoading" [nzPageSize]="page.limit">
		<thead>
			<tr>
				<th nzAlign="center" nzWidth="50px">序号</th>
				<th nzAlign="center" nzWidth="100px">网格员类型</th>
				<th nzAlign="center" nzWidth="120px">网格员</th>
				<th nzAlign="center" nzWidth="auto">村户详细地址</th>
				<th nzAlign="center" nzWidth="180px">联系人/联系电话</th>
				<!-- <th nzAlign="center" nzWidth="150px">走访主题</th> -->
				<th nzAlign="center" nzWidth="120px">走访日期</th>
				<th nzAlign="center" nzWidth="auto">走访内容</th>
				<th nzAlign="center" nzWidth="100px">处理状态</th>
				<th nzAlign="center" nzWidth="80px">处理结果</th>
				<th nzAlign="center" nzWidth="120px">操作</th>

			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let item of basicTable.data; let i = index;">
				<td nzAlign="center">{{ i + 1}}</td>
				<td nzAlign="center">
					{{item.griderType ? griderList[item.griderType - 1] : ''}}
				</td>
				<td nzAlign="center">
					<a
					nz-popover
					nzPopoverTitle="网格员信息"
					nzPopoverTrigger="click"
					[nzPopoverContent]="contentTemplate"
					>{{item.name}}</a>
					<ng-template #contentTemplate>
						<div class="name-detail">
							<div class="name-detail-item">
								<span>姓名：</span>
								<span>{{item.name}}</span>
							</div>
							<div class="name-detail-item">
								<span>手机号码：</span>
								<span>{{item.contractNumber}}</span>
							</div>
							<div class="name-detail-item">
								<span>性别：</span>
								<span>{{item.gender=== 'M' ? '男' : '女'}}</span>
							</div>
							<div class="name-detail-item">
								<span>出生年月日：</span>
								<span>{{item.birthdate}}</span>
							</div>
						</div>
					</ng-template>
				</td>
				<td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.address">
						<a (click)="address(item)">{{item.address}}</a>
					</span>
				</td>
				<td nzAlign="center">
					{{item?.contact || '-'}}/{{item.houseNumber || '-'}}
				</td>
				<!-- <td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.visitTitle">
						{{item.visitTitle}}
					</span>
				</td> -->
				<td nzAlign="center">
					{{item.visitTime}}
				</td>
				<td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.visitContent">
						{{item.visitContent}}
					</span>
				</td>
				<td nzAlign="center">
					<ng-container *ngIf="!['0','1'].includes(item.peopleCondition)">
						{{item.status === '0' ? '未处理': ''}}
						{{item.status === '1' ? '处理中': ''}}
						{{item.status === '2' ? '审核未通过': ''}}
						{{item.status === '3' ? '审核通过': ''}}
					</ng-container>
					<ng-container *ngIf="['0','1'].includes(item.peopleCondition)">
						-
					</ng-container>
				</td>
				<td nzAlign="center">
					<ng-container *ngIf="!['0','1'].includes(item.peopleCondition)">
						<a (click)="result(item)">查看</a>
					</ng-container>
					<ng-container *ngIf="['0','1'].includes(item.peopleCondition)">
						-
					</ng-container>
				</td>
				<td nzAlign="center" *ngIf="isHandle">
					<div class="menu-btn">
						<!-- 0的时候能调save方法， 1的时候才能调update 审核方法  -->
						<ng-container *ngIf="['2','3'].includes(item.peopleCondition)  && ['0', '2'].includes(item.status) && authList.includes(authEnum.VISIT_RECORD_EDIT)">
							<a (nzOnConfirm)="handle($event, item)"  popconfirm [nzPopconfirmTitle]="discloseListHandleTpl">
								处理
							</a>
							<ng-template #discloseListHandleTpl>
								<textarea rows="4" nz-input [(ngModel)]="item.treatResult" style="width: 300px;"></textarea>
							</ng-template>
							<nz-divider nzType="vertical"></nz-divider>
						</ng-container>
						<ng-container *ngIf="['1'].includes(item.status) && authList.includes(authEnum.VISIT_RECORD_EDIT)">
							<a (nzOnConfirm)="verify($event, item)"  popconfirm [nzPopconfirmTitle]="discloseListHandleTpl">
								审核
							</a>
							<ng-template #discloseListHandleTpl>
								<div style="line-height: 30px;">
									<nz-radio-group [(ngModel)]="status">
										<label nz-radio nzValue="2">审核未通过</label>
										<label nz-radio nzValue="3">审核通过</label>
									</nz-radio-group>
								</div>
								
								<textarea rows="4" nz-input [(ngModel)]="item.verifyResult" style="width: 300px;"></textarea>
							</ng-template>
							<nz-divider nzType="vertical"></nz-divider>
						</ng-container>
						<ng-container *ngIf="authList.includes(authEnum.VISIT_RECORD_DETAIL)">
							<a (click)="detail(item)">详情</a>
						</ng-container>
						
					</div>
				</td>
				<td nzAlign="center" *ngIf="!isHandle">
					<ng-container *ngIf="authList.includes(authEnum.VISIT_RECORD_DETAIL)">
						<a (click)="detail(item)">详情</a>
					</ng-container>
				</td>
			</tr>
		</tbody>
	</nz-table>

	<div class="page-pagination">
		<span *ngIf="page.total">共{{page.total}}条数据</span>
		<nz-pagination [(nzPageIndex)]="page.page" [nzTotal]="page.total" nzShowQuickJumper nzShowSizeChanger
			[(nzPageSize)]="page.limit" (nzPageIndexChange)="onSearch()" (nzPageSizeChange)="onSearch(true)">
		</nz-pagination>
	</div>

</div>